<template>
  <div class="category-aside">
    <ul>
      <li
        v-for="(item, index) in categoryAsideList"
        :key="item.title"
        :class="{ active: currentIndex === index }"
        @click="handleCategoryClick(item, index)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CategoryAside",
  props: {
    categoryAsideList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentIndex: 0,
      maitKey: ""
    };
  },
  watch: {
    maitKey(newValue) {
      // 侦听点击之后maitKey值的改变,发出请求,根据matiKey请求subCategory
      this.$emit("handleMaitKeyChange", newValue);
    }
  },
  methods: {
    handleCategoryClick(item, index) {
      this.currentIndex = index;
      this.maitKey = item.maitKey;
    }
  }
};
</script>

<style scoped>
.category-aside {
  width: 100px;
  background: #f6f6f6;
  font-size: 18px;
  height: 100%;
}
.category-aside ul li {
  text-align: center;
  padding: 4px;
}
.active {
  background: #fff;
  border-left: 4px solid var(--color-tint);
}
</style>
